<template>
    <el-dialog title="小票打印记录" :visible.sync="dialogForm" width="1100px">
        <base-list ref="printRecord" :condition="condition" :datas.sync="printRecord" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="编号">
                            <el-input v-model="condition['search_LIKE_ticketNo']" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="打印时间起">
                            <el-date-picker v-model="condition['search_GTE_createDateTime']" :picker-options="startPickerOptions" type="date" placeholder="起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="打印时间止">
                            <el-date-picker v-model="condition['search_LTE_createDateTime']" @change="handleChangeEnd" :picker-options="endPickerOptions" type="date" placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="车牌号">
                            <el-input v-model="condition['search_LIKE_plateNumber']" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button class="ml-100" type="primary" @click="loadData">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table slot="list" :data="printRecord" border stripe max-height="500">
                <el-table-column type="index" label="序号" fixed="left" width="50" align="center"></el-table-column>
                <el-table-column prop="ticketNo" label="编号"  min-width="120"> </el-table-column>
                <el-table-column prop="plateNumber" label="车牌号"  min-width="120"> </el-table-column>
                <el-table-column prop="registerType" label="登记类型"  min-width="120">
                    <template slot-scope='scope'>
                        {{ scope.row.registerType | _filterRegisterType }}
                    </template>
                </el-table-column>
                <el-table-column prop="containerNo" label="箱号"  min-width="120">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="containerNo"></merge>
                        <!-- {{ scope.row.container[0].containerNo }} -->
                    </template>
                </el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="75">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="containerType"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="75">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="containerSize"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="空重"  min-width="75">
                    <template slot-scope='scope'>
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].ifHeavy | _filterIfHeavyType }}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].ifHeavy | _filterIfHeavyType }}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].ifHeavy | _filterIfHeavyType }}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="箱主"  min-width="120">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="ownerName"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="货名"  min-width="120">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="cargoName"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="委托号"  min-width="120">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="entrustNo"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="委托单位"  min-width="120">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="entrustOrgName"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="目的场位"  min-width="120">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="containerPosition"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="作业机械"  min-width="120">
                    <template slot-scope='scope'>
                        <merge :arr="scope.row.container" words="machineName"></merge>
                    </template>
                </el-table-column>
                <el-table-column prop="createBy" label="操作人"  min-width="120"></el-table-column>
                <el-table-column prop="createDateTime" label="打印时间"  min-width="160"></el-table-column>
            </el-table>
        </base-list>
    </el-dialog>
</template>

<script>
import { getTicket } from "@/api/middleControl/middleControl";
import merge from "@/components/merge/merge.vue";

export default {
    components: {
        merge
    },
    data() {
        return {
            dialogForm: false,
            printRecord: [],
            condition: {},
            pageSearch: getTicket
        };
    },
    methods: {
        loadData() {
            this.$refs.printRecord.loadData();
        },
        handleChangeEnd(val) {
            let setVal = val;
            if (val) {
                setVal = val.split(" ")[0] + " 23:59:59";
            }
            this.condition["search_LTE_createDateTime"] = setVal;
        }
    },
    computed: {
        startPickerOptions() {
            let endDate = this.condition["search_LTE_createDateTime"];
            return {
                disabledDate(time) {
                    if (endDate) {
                        return time.getTime() > new Date(endDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        },
        endPickerOptions() {
            let startDate = this.condition["search_GTE_createDateTime"];
            return {
                disabledDate(time) {
                    if (startDate) {
                        return time.getTime() < new Date(startDate).getTime();
                    } else {
                        return false;
                    }
                }
            };
        }
    }
};
</script>

<style scoped>
.table-line-diy {
    width: 100%;
    height: 1px;
    background: #ebeef5;
    position: absolute;
    left: 0;
    top: 50%;
}
</style>
